<template>
  <div class="mall">
    <!-- banner -->
    <div class="banner_back">
      <mt-swipe :auto="8000" class="banner">
        <mt-swipe-item
          class="banner1"
          :style="{ backgroundImage: 'url(' + banner[0].picImg + ')' }"
        ></mt-swipe-item>
        <mt-swipe-item
          class="banner2"
          :style="{ backgroundImage: 'url(' + banner[1].picImg + ')' }"
        ></mt-swipe-item>
        <mt-swipe-item
          class="banner3"
          :style="{ backgroundImage: 'url(' + banner[2].picImg + ')' }"
        ></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 入口区 -->
    <div class="entrance">
      <!-- 日用品 -->
      <div class="entrance_div" @click="goProductList(nameType[0])">
        <div class="daily_back"><div></div></div>
        <span class="daily_span">{{ nameType[0] }}</span>
      </div>
      <!-- 水果 -->
      <div class="entrance_div" @click="goProductList(nameType[1])">
        <div class="fruit_back"><div></div></div>
        <span class="daily_span">{{ nameType[1] }}</span>
      </div>
      <!-- 书籍 -->
      <div class="entrance_div" @click="goProductList(nameType[2])">
        <div class="books_back"><div></div></div>
        <span class="daily_span">{{ nameType[2] }}</span>
      </div>
      <!-- 零食 -->
      <div class="entrance_div" @click="goProductList(nameType[3])">
        <div class="snacks_back"><div></div></div>
        <span class="daily_span">{{ nameType[3] }}</span>
      </div>
      <!-- 全部分类 -->
      <div class="entrance_div" @click="goProductList('全部分类')">
        <div class="classify_back"><div></div></div>
        <span class="daily_span">全部分类</span>
      </div>
    </div>
    <!-- 图片展示 -->
    <div class="surface_plot">
      <div class="plot_back">
        <div
          :style="{ backgroundImage: 'url(' + picture[0].picImg + ')' }"
        ></div>
      </div>
      <div class="plot_buttom">
        <div
          class="plot_buttom_img1"
          :style="{ backgroundImage: 'url(' + picture[1].picImg + ')' }"
        ></div>
        <div
          class="plot_buttom_img2"
          :style="{ backgroundImage: 'url(' + picture[2].picImg + ')' }"
        ></div>
      </div>
    </div>
    <div
      style="height:0.625rem;background-color: #f7f7f7;margin-top: 0.9375rem;"
    ></div>
    <!-- 热卖商品 -->
    <div class="hot_saleval">
      <div class="hot_top">
        <h3>热卖商品</h3>
        <span @click="goProductList('全部分类')">更多></span>
      </div>
      <div class="hot_content">
        <div
          class="hot_content_box"
          v-for="item in jurisdictionContent"
          :key="item.id"
          @click="goGoodsDetails(item.id)"
        >
          <div class="hot_div_img box_left">
            <div
              :style="{ backgroundImage: 'url(' + item.picture + ')' }"
            ></div>
          </div>
          <div class="hot_div_brief box_right">
            <h4>{{ item.name }}</h4>
            <p>规格：{{ item.gauge }}</p>
            <p>{{ item.brief }}</p>
            <div>
              <span class="span_yuan">￥{{ item.price }}</span>
              <span class="span_button">预购</span>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 1.25rem;clear: both;"></div>
    </div>

    <div style="height:1.25rem;clear: both;"></div>
    <mt-spinner type="fading-circle"></mt-spinner>
    <!-- 购物车图标 -->
    <div class="cart" @click="goShoppingCart"><div></div></div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      nameType: ["日用品", "水果", "书籍", "零食"],
      limit: 5,
      jurisdictionContent: [],
      picture: [
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/6c5e8022927afbcca0077220e6f6f8d91767f73c.png",
          url: ""
        },
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/d423e7f0c39ca4db3abe087510efcf655e2606b7.png",
          url: ""
        },
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/9efeef7bbc0172de8bb32ed68058a8dcb5e63a62.png",
          url: ""
        }
      ],
      banner: [
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/ff8d58b51353ab7759657fb0555466b63dda085b.png",
          url: ""
        },
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/ff8d58b51353ab7759657fb0555466b63dda085b.png",
          url: ""
        },
        {
          picImg:
            "http://jpanese-project.oss-cn-chengdu.aliyuncs.com/system/ff8d58b51353ab7759657fb0555466b63dda085b.png",
          url: ""
        }
      ]
    };
  },
  created() {
    this.handleJurisdiction();
  },
  methods: {
    goProductList(val) {
      // 保存参数
      localStorage.name = val;
      //到列表
      //console.log(val);
      this.$router.push({
        name: "ProductList",
        params: { name: val }
      });
      Indicator.open({ spinnerType: "fading-circle" });
    },
    goGoodsDetails(val) {
      localStorage.sp_id = val;
      //到详情页
      this.$router.push({
        name: "ProductDetails",
        params: { sp_id: val }
      });
    },
    goShoppingCart() {
      //到购物车
      this.$router
        .push({
          name: "ShoppingCart"
        })
        .catch(err => {
          err;
        });
    },
    handleJurisdiction() {
      //热门商品s
      let me = this;
      this.$axios
        .post("/api/mall/index", { limit: this.limit }, { emulateJSON: true })
        .then(kun => {
          console.log(kun);
          if (kun.code == 200) {
            me.jurisdictionContent = kun.data;
            me.picture = kun.msg;
            me.banner = kun.total;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
h3,
h4 {
  margin: 0;
  padding: 0;
}
.box_left {
  float: left;
}
.box_right {
  float: right;
}
//banner
.banner_back {
  width: 100%;
  height: 9.375rem;
  padding-top: 1.875rem;

  /* 设置渐变 */
  background: rgb(254, 121, 94); /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgb(255, 127, 95),
    rgb(236, 62, 82) 70%,
    rgb(255, 255, 255) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgb(255, 127, 95),
    rgb(229, 39, 77) 70%,
    rgb(255, 255, 255) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgb(255, 127, 95),
    rgb(229, 39, 77) 70%,
    rgb(255, 255, 255) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  // banner
  .banner {
    width: 21.5625rem;
    height: 9.375rem;
    margin: 0 auto;
    border-radius: 0.3125rem;
    // 图片缩放
    .banner1 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .banner2 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .banner3 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
}

// 入口区
.entrance {
  width: 21.5625rem;
  margin: 0 auto;
  margin-top: 0.925rem;
  display: flex;
  justify-content: space-between;

  .entrance_div {
    width: 3.125rem;
    height: 4.40625rem;

    //  日用品
    .daily_back {
      width: 3.125rem;
      height: 3.125rem;

      :first-child {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;

        background-image: url(../../assets/shop/ryp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }
    //水果
    .fruit_back {
      width: 3.125rem;
      height: 3.125rem;

      :first-child {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;

        background-image: url(../../assets/shop/fruit.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }
    //书籍
    .books_back {
      width: 3.125rem;
      height: 3.125rem;

      :first-child {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;

        background-image: url(../../assets/shop/books.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }
    //零食
    .snacks_back {
      width: 3.125rem;
      height: 3.125rem;

      :first-child {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;

        background-image: url(../../assets/shop/snacks.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }
    //分类
    .classify_back {
      width: 3.125rem;
      height: 3.125rem;

      :first-child {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;

        background-image: url(../../assets/shop/classify.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }

    .daily_span {
      width: 3.125rem;
      height: 0.65625rem;
      margin-top: 0.625rem;
      display: block;
      font-size: 0.75rem;
      text-align: center;
      color: #333333;
    }
  }
}

//图片展示
.surface_plot {
  width: 100%;
  margin-top: 1rem;

  .plot_back {
    width: 21.5625rem;
    height: 9.375rem;
    margin: 0 auto;
    border-radius: 0.3125rem;

    :first-child {
      width: 21.5625rem;
      height: 9.375rem;
      background-image: url(../../assets/shop/dasp.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  .plot_buttom {
    width: 21.5625rem;
    height: 9.375rem;
    margin: 0 auto;
    border-radius: 0.3125rem;
    margin-top: 0.625rem;

    .plot_buttom_img1 {
      width: 10.5rem;
      height: 9.375rem;
      float: left;

      background-image: url(../../assets/shop/tcimg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .plot_buttom_img2 {
      width: 10.5rem;
      height: 9.375rem;
      float: right;

      background-image: url(../../assets/shop/hcimg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
}

//热门商品
.hot_saleval {
  width: 21.5625rem;
  margin: 0 auto;

  .hot_top {
    height: 1.25rem;
    padding-top: 1.21875rem;
    margin-bottom: 0.625rem;
    color: #1a1a1a;

    h3 {
      float: left;
      font-size: 1.125rem;
      color: #1a1a1a;
    }
    span {
      float: right;
      color: #999999;
      font-size: 0.875rem;
    }
  }
  .hot_content {
    .hot_content_box {
      height: 8.125rem;
      margin-bottom: 0.9375rem;
      clear: both;
      .hot_div_img {
        width: 5.625rem;

        :first-child {
          width: 100%;
          height: 8.125rem;
          background-image: url(../../assets/shop/spimg.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
        }
      }
      .hot_div_brief {
        width: 15.3125rem;
        height: 8.125rem;
        color: #1a1a1a;
        position: relative;

        p {
          margin: 0.625rem 0;
          color: #9c9c9c;
          font-size: 0.75rem;
        }
        div {
          position: absolute;
          bottom: 0;
          width: 100%;
        }
        .span_yuan {
          color: #ff2000;
          font-weight: bold;
          font-size: 1.125rem;
        }
        .span_button {
          float: right;
          width: 3.5625rem;
          height: 1.125rem;
          text-align: center;
          line-height: 1.125rem;
          background-color: #ff2000;
          border-radius: 1.125rem;
          color: #ffffff;
          font-size: 0.75rem;
        }
      }
    }
  }
}

//购物车
.cart {
  position: fixed;
  bottom: 6.15625rem;
  right: 0.3125rem;
  :first-child {
    width: 3.75rem;
    height: 3.75rem;
    background-image: url(../../assets/shop/cart.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
}
</style>
